<template>
  <div class="app">
    <!-- 导航面包屑 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/home/userLabels'}">会员标签</el-breadcrumb-item>
        <el-breadcrumb-item>{{this.$store.state.marketing.action}}会员标签</el-breadcrumb-item>
      </el-breadcrumb>
      <h1>{{this.$store.state.marketing.action}}会员标签</h1>
    </el-card>

    <!-- 基础信息 -->
    <el-card>
      <el-row>
        <el-col :span="5">
          <p>基础信息</p>
        </el-col>
        <el-col :span="14">
          <el-form ref="addUserLabelsForm" :model="addUserLabelsForm" label-width="120px">
            <!-- 占位 -->
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <!-- 标签名称 -->
            <el-form-item label="标签名称">
              <el-input style="width:350px" v-model="addUserLabelsForm.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <!-- 标签类型 -->
            <el-form-item label="标签类型">
              <el-radio v-model="addUserLabelsForm.type" label="自动标签"></el-radio>
              <el-radio v-model="addUserLabelsForm.type" label="手动标签"></el-radio>
            </el-form-item>
            <!-- 最近消费时间 -->
            <el-form-item label="最近消费时间" v-show="addUserLabelsForm.type=='手动标签'?true:false">
              <el-select
                style="width:352px"
                v-model="addUserLabelsForm.latestConsumption"
                placeholder="请选择最近消费时间"
              >
                <el-option label="今天" value="今天"></el-option>
                <el-option label="最近15天" value="最近15天"></el-option>
                <el-option label="最近30天" value="最近30天"></el-option>
                <el-option label="最近60天" value="最近60天"></el-option>
                <el-option label="最近90天" value="最近90天"></el-option>
              </el-select>
            </el-form-item>
            <!-- 累计消费次数 -->
            <el-form-item label="累计消费次数" v-show="addUserLabelsForm.type=='手动标签'?true:false">
              <el-input class="inp1" placeholder="请输入内容" v-model="cumulativeConsumption1">
                <template slot="append">次</template>
              </el-input>&nbsp;-
              <el-input class="inp1" placeholder="请输入内容" v-model="cumulativeConsumption2">
                <template slot="append">次</template>
              </el-input>
            </el-form-item>
            <!-- 累计消费金额 -->
            <el-form-item label="累计消费金额" v-show="addUserLabelsForm.type=='手动标签'?true:false">
              <el-input class="inp1" placeholder="请输入内容" v-model="accumulatedConsumption1">
                <template slot="append">元</template>
              </el-input>&nbsp;-
              <el-input class="inp1" placeholder="请输入内容" v-model="accumulatedConsumption2">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <!-- 订单均价 -->
            <el-form-item label="订单均价" v-show="addUserLabelsForm.type=='手动标签'?true:false">
              <el-input class="inp1" placeholder="请输入内容" v-model="amount1">
                <template slot="append">元</template>
              </el-input>&nbsp;-
              <el-input class="inp1" placeholder="请输入内容" v-model="amount2">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <!-- 累计获取积分 -->
            <el-form-item label="累计获取积分" v-show="addUserLabelsForm.type=='手动标签'?true:false">
              <el-input class="inp1" placeholder="请输入内容" v-model="points1">
                <template slot="append">分</template>
              </el-input>&nbsp;-
              <el-input class="inp1" placeholder="请输入内容" v-model="points2">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
            <!-- 累计充值次数 -->
            <el-form-item label="累计充值次数" v-show="addUserLabelsForm.type=='手动标签'?true:false">
              <el-input class="inp1" placeholder="请输入内容" v-model="cumnlativeRecharge1">
                <template slot="append">次</template>
              </el-input>&nbsp;-
              <el-input class="inp1" placeholder="请输入内容" v-model="cumnlativeRecharge2">
                <template slot="append">次</template>
              </el-input>
            </el-form-item>
            <!-- 累计充值金额 -->
            <el-form-item label="累计充值金额" v-show="addUserLabelsForm.type=='手动标签'?true:false">
              <el-input class="inp1" placeholder="请输入内容" v-model="accumulatedRecharge1">
                <template slot="append">元</template>
              </el-input>&nbsp;-
              <el-input class="inp1" placeholder="请输入内容" v-model="accumulatedRecharge2">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="5"></el-col>
      </el-row>
      <el-button
        style="margin-top:30px;margin-left:352px"
        type="primary"
        @click="actionUserLabels"
      >提交</el-button>
      <el-button @click="toUserLabels">返回</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addUserLabelsForm: {
        name: "",
        type: "自动标签",
        latestConsumption: "",
        cumulativeConsumption: "",
        accumulatedConsumption: "",
        amount: "",
        points: "",
        cumnlativeRecharge: "",
        accumulatedRecharge: "",
      },
      //要修改的id
      id: "",
      //
      cumulativeConsumption1: "",
      cumulativeConsumption2: "",
      accumulatedConsumption1: "",
      accumulatedConsumption2: "",
      amount1: "",
      amount2: "",
      points1: "",
      points2: "",
      cumnlativeRecharge1: "",
      cumnlativeRecharge2: "",
      accumulatedRecharge1: "",
      accumulatedRecharge2: "",
    };
  },
  methods: {
    sizeChange() {
      return;
    },
    pageChange() {
      return;
    },
    //点击跳转添加页面
    toUserLabels() {
      this.$router.push("/home/userLabels");
    },
    //添加or修改
    actionUserLabels() {
      if (this.$store.state.marketing.action == "编辑")
        return this.editUserLabels();
      this.addUserLabels();
    },
    //添加会员标签
    async addUserLabels() {
      if (this.addUserLabelsForm.type == "自动标签") {
        const { data: res } = await this.$axios.post("/vip/labels/add", {
          name: this.addUserLabelsForm.name + "",
          type: this.addUserLabelsForm.type + "",
          latestConsumption: "今天",
          cumulativeConsumption: "0-0次",
          accumulatedConsumption: "0-0元",
          amount: "0-0元",
          points: "0-0分",
          cumnlativeRecharge: "0-0次",
          accumulatedRecharge: "0-0元",
        });
        if (res.code != 0) return this.$message.error("会员标签添加失败!");
        this.$message.success("会员标签添加成功!");
        this.toUserLabels();
      } else {
        this.addUserLabelsForm.cumulativeConsumption =
          this.cumulativeConsumption1 +
          "-" +
          this.cumulativeConsumption2 +
          "次";
        this.addUserLabelsForm.accumulatedConsumption =
          this.accumulatedConsumption1 +
          "-" +
          this.accumulatedConsumption2 +
          "元";
        this.addUserLabelsForm.amount =
          this.amount1 + "-" + this.amount2 + "元";
        this.addUserLabelsForm.points =
          this.points1 + "-" + this.points2 + "分";
        this.addUserLabelsForm.cumnlativeRecharge =
          this.cumnlativeRecharge1 + "-" + this.cumnlativeRecharge2 + "次";
        this.addUserLabelsForm.accumulatedRecharge =
          this.accumulatedRecharge1 + "-" + this.accumulatedRecharge2 + "元";
        const { data: res } = await this.$axios.post("/vip/labels/add", {
          name: this.addUserLabelsForm.name + "",
          type: this.addUserLabelsForm.type + "",
          latestConsumption: this.addUserLabelsForm.latestConsumption + "",
          cumulativeConsumption:
            this.addUserLabelsForm.cumulativeConsumption + "",
          accumulatedConsumption: this.addUserLabelsForm.accumulatedConsumption,
          amount: this.addUserLabelsForm.amount,
          points: this.addUserLabelsForm.points,
          cumnlativeRecharge: this.addUserLabelsForm.cumnlativeRecharge,
          accumulatedRecharge: this.addUserLabelsForm.accumulatedRecharge,
        });
        if (res.code != 0) return this.$message.error("会员标签添加失败!");
        this.$message.success("会员标签添加成功!");
        this.toUserLabels();
      }
    },
  },
  mounted() {
    if (!this.$store.state.marketing.action) return this.toUserLabels();
  },
};
</script>

<style lang="less" scoped>
.numInp {
  width: 130px;
  margin: 0 15px;
}
.span1 {
  line-height: 39px;
}
.app > .el-card:nth-child(2),
.app > .el-card:nth-child(3) {
  margin-top: 15px;
}
.inp1 {
  width: 167px;
}
</style>